<template>
    <view class="app">
         <uni-list>
        	<uni-list-item title="地区" :custom="true" @click="selArea">
			<span :class="{phStyle: !address}">{{address ? address : '请选择'}}</span>
		</uni-list-item>
         <uni-list-item title="小区名称" :custom="true" :show-arrow="false">
          <div class="inputTip_box">
            <input type="text" placeholder="请输入小区名称" v-model="form.dhc_name" @blur="validateName">
            <span class="inputTip">{{inputTip}}</span>
          </div>
        </uni-list-item>

        </uni-list>
        <view class="submit_btn" @click="submit">保存</view>
        	<mpvue-city-picker :pickerValueDefault="defaultArea" themeColor="#FFD11A"
        ref="mpvueCityPicker" @onConfirm="onConfirm"></mpvue-city-picker>
    </view>
</template>

<script>
import { addCommunity } from '@/api/constructionSite'
import uniList from '@/components/uni-list/uni-list'
import uniListItem from '@/components/uni-list-item/uni-list-item'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
export default {
	name: 'AddCommunity',
	components: {
		uniList,
		uniListItem,
		mpvueCityPicker
	},
	data() {
		return {
			address: '',
			defaultArea: [0, 0, 1],
			form: {
				province: '',
				city: '',
				district: '',
				dhc_name: ''
			},
			inputTip: '',
			option: {}
		}
	},
	onLoad(option) {
		this.option = option
	},
	methods: {
		selArea() {
			this.$refs.mpvueCityPicker.show()
		},
		onConfirm(pickObj) {
			const [province, city, district] = pickObj.code
			this.form = {
				province,
				city,
				district,
				dhc_name: this.form.dhc_name
			}
			this.defaultArea = pickObj.value
			this.address = pickObj.label
		},
		validateName() {
			const nameReg = /^[a-zA-Z\d\u4E00-\u9FA5]{1,12}$/g
			if (nameReg.test(this.form.dhc_name) || !this.form.dhc_name) {
				this.inputTip = ''
			} else if (this.form.dhc_name) {
				this.inputTip = '格式错误'
			}
		},
		submit() {
			let flag = true
			Object.keys(this.form).forEach(item => {
				if (!this.form[item]) {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none'
					})
					flag = false
				}
			})
			if (this.inputTip) {
				flag = false
			}
			if (flag) {
				addCommunity(this.form).then(() => {
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					setTimeout(() => {
						let pages = getCurrentPages()// 获取页面栈
						let prevPage = pages[pages.length - 2]// 上一个页面
			   			if (prevPage) {
							prevPage.$vm.form.district_id = this.form.district
							prevPage.$vm.selIndex = null
							prevPage.$vm.community_id = ''
							uni.navigateBack()
						}
						// const params = {
						// 	...this.option,
						// 	district_id: this.form.district
						// }
						// uni.navigateTo({
						// 	url: `/pages/constructionSite/communityList${this.commonJS.queryData(params)}`
						// })
					}, 500)
				})
			}
		}
	}
}
</script>

<style scoped>
 .phStyle {
      color: gray;
    }
      .submit_btn {
    height:100px;
    line-height: 100px;
    text-align: center;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background:rgba(255,209,26,1);
    box-shadow:0px -3px 10px 0px rgba(0, 0, 0, 0.1);
    font-size:32px;
    color:rgba(58,27,4,1);
    z-index: 999;
    }
</style>
